<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item to="/admin/home">首页</el-breadcrumb-item>
      <el-breadcrumb-item to="/admin/user">用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>修改用户</el-breadcrumb-item>
      <el-button class="back" type="primary" size="mini" @click="$router.back()">返回</el-button>
    </el-breadcrumb>
    <el-card>
      <el-form ref="userform" :model="userForm" :rules="userRules" label-width="100px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="userForm.username" placeholder="请输入用户名" prefix-icon="el-icon-user"></el-input>
        </el-form-item>
        <el-form-item label="用户头像" prop="avatar"><img class="useravatar" :src="userForm.avatar" alt="" /> </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="userForm.password" placeholder="请输入用户密码" show-password prefix-icon="el-icon-lock"></el-input>
        </el-form-item>
        <el-form-item label="是否管理员" prop="ismanager">
          <el-select v-model="userForm.ismanager" placeholder="请选择用户权限">
            <el-option label="管理员" value="0"></el-option>
            <el-option label="游客" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="添加用户">
          <el-button type="primary" @click="editorUsers">修改</el-button>
          <el-button @click="canceleditorUser">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'BackEndAddUser',

  data() {
    return {
      userForm: {
        username: '',
        password: '',
        ismanager: '',
        avatar: ''
      },
      userRules: {
        username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
        ismanager: [{ required: true, message: '请选择是否管理员', trigger: 'change' }]
        // avatar: [{ required: true, message: '请上传头像', trigger: 'change' }]
      },
      id: 0
    }
  },
  async created() {
    this.id = this.$route.params.id
    if (this.id == 0) {
      return
    }
    const { result } = await this.$http.get(`/users/${this.id}`)
    this.userForm = result
    this.userForm.ismanager = ''
  },
  mounted() {},

  methods: {
    editorUsers() {
      this.$refs['userform'].validate(async valid => {
        if (valid) {
          const { message } = await this.$http.put(`/users/${this.id}`, {
            username: this.userForm.username,
            password: this.userForm.password,
            ismanager: this.userForm.ismanager,
            avatar:this.userForm.avatar,
          })
          this.$message({
            type: 'success',
            message: message,
            duration: 1000
          })
          this.$router.push('/admin/user')
        }
      })
    },
    canceleditorUser() {
      this.$router.push('/admin/user')
    }
  }
}
</script>

<style scoped>
.el-input {
  width: 220px;
}
.back {
  position: relative;
  top: -6px;
}
.el-card {
  /* width: 500px; */
  height: 550px;
}
.useravatar {
  width: 100px;
  height: 100px;
}
</style>
